<template>
  <div class="login-container flx-center">
    <div class="login-box">
      <SwitchDark class="dark" />
      <div class="login-left">
        <img class="login-left-img" src="../../assets/images/WELCOME2.png" alt="login" />
      </div>
      <div class="login-form">
        <div class="login-logo">
          <img class="login-icon" src="@/assets/images/favicon.ico" alt="" />
          <h2 class="logo-text">Chestnut</h2>
        </div>

        <LoginForm v-if="!isScan"/>
        <codeForm v-if="isScan"/>

        <div class="login-content-main-sacn" @click="isScan = !isScan">
          <i class="iconfont" :class="isScan ? 'icon-diannao1' : 'icon-barcode-qr'"></i>
          <img v-show="isScan" src="@/assets/images/zhanghaodenglu.png" alt="">
          <img v-show="!isScan" src="@/assets/images/saomadenglu.png" alt="">
          <!-- 遮挡块-->
<!--          <div class="login-content-main-sacn-delta"></div>-->
        </div>
      </div>
    </div>
  </div>
</template>

<script setup name="login">

import SwitchDark from "@/components/SwitchDark/index.vue";
import LoginForm from "./components/LoginForm.vue";
import codeForm from './components/codeForm.vue'
import {reactive, ref} from "vue";

const isScan = ref(false)
</script>

<style scoped lang="scss">
@import "./index";
</style>
